<template>
<div>
<SwipeIndex/>
 <h4 class="title">vue+vuex+vue-router+mint-ui 开源demo（简单粗暴）欢迎学习与交流，最好点个赞</h4>
            <div class="jiage">价格：<span>￥{{this.unit}}</span><span>￥9999.99</span></div>
            <div class="size"><span>尺码：</span>
               
            <mt-navbar v-model="selected">
                <mt-tab-item id="41" class="size-con" style="font-size:40px;">41</mt-tab-item>
                <mt-tab-item id="42" class="size-con" style="font-size:40px;">42</mt-tab-item>
                <mt-tab-item id="43" class="size-con" style="font-size:40px;">43</mt-tab-item>
                <mt-tab-item id="44" class="size-con" style="font-size:40px;">44</mt-tab-item>
                <mt-tab-item id="45" class="size-con" style="font-size:40px;">45</mt-tab-item>
                <mt-tab-item id="46" class="size-con" style="font-size:40px;">46</mt-tab-item>
                <mt-tab-item id="47" class="size-con" style="font-size:40px;">47</mt-tab-item>
                <mt-tab-item id="48" class="size-con" style="font-size:40px;">48</mt-tab-item>
                <mt-tab-item id="49" class="size-con" style="font-size:40px;">49</mt-tab-item>
                <mt-tab-item id="50" class="size-con" style="font-size:40px;">50</mt-tab-item>
            </mt-navbar>
            </div>
            <div class="num">数量：<span @click='num -- ' class="span-boder">-</span><span>{{num}}</span><span @click='num ++ ' class="span-boder">+</span><b>剩余:10000件</b></div>
            <div class="shopping">
                <mt-button type="primary" v-on:click="AddShopping">加入购物车</mt-button>
                <mt-button type="danger" v-on:click="Buy">立即购买</mt-button>
            </div>
</div>
</template>

<script>
import SwipeIndex from '../../SwipeIndex/SwipeIndex.vue'
import { MessageBox,Toast } from 'mint-ui';
export default {
    data () {
        return {
            unit:666,
            num:0,
            selected:"",
            commoditys:[],
            commodity:{}


        }
    },
    methods:{
   AddShopping(){
       if(this.num&&this.selected){
         MessageBox.confirm('是否前往购物车?').then(()=>{
             this.commodity={unit:this.unit,num:this.num,selected:this.selected}
             if("commoditys" in localStorage){
             this.commoditys=JSON.parse(localStorage.commoditys)
             this.commoditys.push(this.commodity)
             localStorage.commoditys=JSON.stringify(this.commoditys)
             }else{
             this.commoditys.push(this.commodity)
             localStorage.commoditys=JSON.stringify(this.commoditys)
             }
             this.$router.push( "/shoppingcart" )

         })
       }else{
            Toast('请选择属性');
       }
   },
   Buy(){
       Toast('未添加此功能')
   }
    },
    components:{
        SwipeIndex
    }
    
}
</script>

<style scoped>
h4{
  font-size:20px;
  font-weight:800;
  text-align:left;
}
.lunbotu{
    height: 200px;
}
.title{
    
    margin: 10px auto;
}
.jiage{
    font-size: 18px;
    padding: 15px 5px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc
}
.jiage span{
    color:red;
    font-size:22px;
}
.jiage span:nth-last-child(1){
    font-size: 14px;
    color: #999;
    padding-left: 10px;
    text-decoration: line-through;
}
.mint-tab-item {
    width:20px;
    border:1px solid #888;
}
.mint-navbar{
     display:flex;
    flex-direction: row;
 flex-wrap:wrap;
}

.span-boder {
    display: inline-block;
    border:2px solid #ccc;
    width: 12px;
    height: 22px;
    margin:2px;
}
.num b{
    margin-left: 5px;
}
.shopping{
    width: 228px;
    position: absolute;
    bottom:0px;
    right:0
}
.active {
    background-color: #f00;
}
.is-selected{
    background:#ff4568;
    color:#000;
}
</style>
